import React, { useRef } from 'react';
import { Editor } from '@tinymce/tinymce-react';
import type { Editor as TinyMCEEditor } from 'tinymce';
import './style.css';

interface RichTextEditorProps {
  value: string;
  onChange?: (content: string) => void;
  readOnly?: boolean;
  placeholder?: string;
  height?: string | number;
  isMobile?: boolean;
}

export const RichTextEditor: React.FC<RichTextEditorProps> = ({
  value,
  onChange,
  readOnly = false,
  placeholder = '内容将显示在这里...',
  height = '100%',
  isMobile = false
}) => {
  const editorRef = useRef<TinyMCEEditor | null>(null);

  // 调试：打印接收到的value
  React.useEffect(() => {
    console.log('=== RichTextEditor 接收到新value ===');
    console.log('value类型:', typeof value);
    console.log('value长度:', value?.length);
    console.log('value内容（前100字符）:', value?.substring(0, 100));
    console.log('editorRef.current存在吗?', !!editorRef.current);

    // 强制更新TinyMCE编辑器内容（带重试机制）
    const updateContent = (retryCount = 0) => {
      if (editorRef.current && value) {
        try {
          const currentContent = editorRef.current.getContent();
          if (currentContent !== value) {
            console.log('TinyMCE内容不一致，强制更新...');
            editorRef.current.setContent(value);
            console.log('TinyMCE内容已更新');
          } else {
            console.log('TinyMCE内容已一致，无需更新');
          }
        } catch (error) {
          console.error('TinyMCE更新失败:', error);
        }
      } else if (value && retryCount < 5) {
        // 编辑器还没初始化，500ms后重试
        console.log(`编辑器未初始化，${retryCount + 1}次重试（500ms后）...`);
        setTimeout(() => updateContent(retryCount + 1), 500);
      }
    };

    updateContent();
  }, [value]);

  // 转换高度格式 - 支持数字、百分比、calc、像素值
  const editorHeight = typeof height === 'number' ? height :
                       height.includes('%') ? '100%' :  // 如果是百分比，使用100%填充容器
                       height.includes('calc') ? '100%' :  // 如果是calc，使用100%填充容器
                       parseInt(height) || 500;

  return (
    <div className="tinymce-editor-container" style={{ height }}>
      <Editor
        apiKey="no-api-key"  // 使用开发模式，不需要域名验证
        onInit={(evt, editor) => editorRef.current = editor}
        value={value}
        onEditorChange={(content) => {
          if (onChange) {
            onChange(content);
          }
        }}
        disabled={readOnly}
        init={{
          height: editorHeight,
          menubar: !isMobile,
          language: 'zh_CN',
          plugins: [
            'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
            'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
            'insertdatetime', 'media', 'table', 'wordcount', 'paste', 'help'
          ],
          toolbar: isMobile
            ? 'undo redo | bold italic | alignleft aligncenter alignright | bullist numlist'
            : 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | ' +
              'alignleft aligncenter alignright alignjustify | ' +
              'bullist numlist outdent indent | forecolor backcolor | ' +
              'removeformat | help',

          // 字体列表（中文字体）
          font_family_formats: '宋体=SimSun,serif;' +
            '黑体=SimHei,sans-serif;' +
            '微软雅黑=Microsoft YaHei,sans-serif;' +
            '楷体=KaiTi,serif;' +
            '仿宋=FangSong,serif;' +
            'Arial=Arial,sans-serif;' +
            'Times New Roman=Times New Roman,serif;' +
            'Courier New=Courier New,monospace',

          // 字号列表（pt单位，对应Word）
          font_size_formats: '12pt 14pt 16pt 18pt 20pt 22pt 24pt 26pt 28pt 36pt 42pt',

          // 块格式（标题样式）
          block_formats: '正文=p;' +
            '一级标题=h1;' +
            '二级标题=h2;' +
            '三级标题=h3;' +
            '四级标题=h4;' +
            '五级标题=h5;' +
            '六级标题=h6',

          // 内容样式
          content_style: `
            body {
              font-family: 仿宋, FangSong, serif;
              font-size: 12pt;
              line-height: 1.8;
              color: #000;
              background: #fff;
              padding: 20px;
            }

            /* 一级标题样式 */
            h1 {
              font-family: 黑体, SimHei, sans-serif;
              font-size: 16pt;
              font-weight: bold;
              text-align: left;
              margin-top: 1em;
              margin-bottom: 1em;
              line-height: 1.5;
            }

            /* 二级标题样式 */
            h2 {
              font-family: 黑体, SimHei, sans-serif;
              font-size: 14pt;
              font-weight: bold;
              text-align: left;
              margin-top: 0.5em;
              margin-bottom: 0.5em;
              line-height: 1.5;
            }

            /* 三级标题样式 */
            h3 {
              font-family: 黑体, SimHei, sans-serif;
              font-size: 12pt;
              font-weight: bold;
              text-align: left;
              margin-top: 0.3em;
              margin-bottom: 0.3em;
              line-height: 1.5;
            }

            /* 正文段落样式 */
            p {
              font-family: 仿宋, FangSong, serif;
              font-size: 12pt;
              text-align: justify;
              text-indent: 2em;
              line-height: 1.8;
              margin: 0;
              margin-bottom: 0.5em;
            }

            /* 列表样式 */
            ul, ol {
              font-family: 仿宋, FangSong, serif;
              font-size: 12pt;
              line-height: 1.8;
              padding-left: 2em;
            }

            /* 表格样式 */
            table {
              border-collapse: collapse;
              width: 100%;
              margin: 1em 0;
            }

            table td, table th {
              border: 1px solid #000;
              padding: 8px;
              font-size: 12pt;
            }
          `,

          // 粘贴设置（保留格式）
          paste_as_text: false,
          paste_retain_style_properties: 'all',
          paste_merge_formats: true,

          // 其他设置
          branding: false,
          promotion: false,
          statusbar: !isMobile,
          elementpath: !isMobile,
          resize: !isMobile,
          placeholder: placeholder,

          // 自动保存
          autosave_restore_when_empty: false,

          // 移动端优化
          mobile: {
            theme: 'silver',
            plugins: ['autosave', 'lists', 'autolink'],
            toolbar: ['undo', 'bold', 'italic', 'styleselect']
          }
        }}
      />
    </div>
  );
};

export default RichTextEditor;
